<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>你的名字:<input type="text" id="username">
    <button onclick="open_ws()">登录聊天室</button>
</p>

<p>消息内容:<input type="text" id="message">
    <button onclick="send_msg()">发送消息</button>
</p>
<div id="chat_list">

</div>

</body>
<script type="application/javascript">

    var ws = null;
    function open_ws() {
        var username = document.getElementById("username").value;
        ws = new WebSocket("ws://192.168.16.232:9527/ws/"+username);
        ws.onopen = function () {
            alert("欢迎登录");
        };
        ws.onmessage = function (eventMessage) {
            var chat = JSON.parse(eventMessage.data);
            var p = document.createElement("p");
            p.innerText = chat.from_user + ":" + chat.chat;
            document.getElementById("chat_list").appendChild(p);
        };
    }

    function send_msg() {
        var msg = document.getElementById("message").value;
        ws.send(msg);
    }
</script>
</html>